<template>
  <el-card>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          客户数量: {{customercount}}
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          员工数量：{{salespersoncount}}
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          售出车辆数量: {{vehiclesaledcount}}
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          售出部件数量：{{partsaledcount}}
        </el-card>
      </el-col>
    </el-row>



    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div id="pie1" style="width: auto; height: 300%;"></div>
          <div align="center" style="color: #5BA8FF; font-size: 20px">库存数据图</div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="pie2" style="width: auto; height: 300%;"></div>
          <div align="center" style="color: #5BA8FF; font-size: 20px">售出车辆品牌图</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div id="pie3" style="width: auto; height: 300%;"></div>
          <div align="center" style="color: #5BA8FF; font-size: 20px">售出车辆颜色图</div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="pie4" style="width: auto; height: 300%;"></div>
          <div align="center" style="color: #5BA8FF; font-size: 20px">售出零部件图</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
<!--          <div id="line" style="width: auto; height: 300%;"></div>-->
          <div id="line1" style="width: auto; height: 300%;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="line2" style="width: auto; height: 300%;"></div>
        </el-card>
      </el-col>
    </el-row>

<!--    <el-row :gutter="10">-->
<!--      <el-col :span="12">-->
<!--        <el-card>-->

<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <el-card>-->
<!--&lt;!&ndash;          <div id="line3" style="width: auto; height: 300%;"></div>&ndash;&gt;-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->

<!--    <el-row :gutter="10">-->
<!--      <el-col :span="12">-->
<!--        <el-card>-->

<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <el-card>-->

<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->

  </el-card>
</template>

<script>
import { listChart, customerCount, salespersonCount, vehicleSaledCount, partSaledCount, brandSaleCount, colorSaleCount, partSaleCount, salepersonachivement,
  showpartprofit, showvehicleprofit} from "@/api/chart/chart";
export default {
  data() {
    return {
      customercount: 0,
      salespersoncount: 0,
      vehiclesaledcount: 0,
      partsaledcount: 0,

    }
  },
  methods: {
    count() {
      customerCount().then(response => {
        this.customercount = response;
      })
      salespersonCount().then(response => {
        this.salespersoncount = response;
      })
      vehicleSaledCount().then(response => {
        this.vehiclesaledcount = response;
      })
      partSaledCount().then(response => {
        this.partsaledcount = response;
      })
    },

    showPie1() {
      let chartData = [];
      // let newData = [];
      listChart().then(response => {
        chartData = response;
        console.log(chartData);
        // for(let i in chartData) {
        //   newData[i] = {};
        //   newData[i].value = chartData[i].value;
        //   newData[i].name = chartData[i].name;
        // }
        // let code = '[';
        // for (let i = 0; i < chartData.length; i++) {
        //   code += `{ value: ${chartData[i].value}, name: '${chartData[i].name}' },`;
        // }
        // code = code.slice(0, -1);
        // code += ']'
        let myEchartsBar=this.$echarts.init(document.getElementById("pie1"))
        myEchartsBar.setOption({
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: chartData
              }
            ]
          }
        );
      })
    },

    showPie2() {
      let chartData = [];
      brandSaleCount().then(response => {
        chartData = response;
        let myEchartsBar = this.$echarts.init(document.getElementById("pie2"))
        myEchartsBar.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: chartData
            }
          ]
        })
      })
    },

    showPie3() {
      let chartData = [];
      colorSaleCount().then(response => {
        chartData = response;
        let myEchartsBar = this.$echarts.init(document.getElementById("pie3"))
        myEchartsBar.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: chartData
            }
          ]
        })
      })
    },

    showPie4() {
      let chartData = [];
      partSaleCount().then(response => {
        chartData = response;
        let myEchartsBar = this.$echarts.init(document.getElementById("pie4"))
        myEchartsBar.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: chartData
            }
          ]
        })
      })
    },

    getsalepersonachivement(){
      salepersonachivement().then(response => {
        let myEchartsBar = this.$echarts.init(document.getElementById("line"))
        myEchartsBar.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          title: {
            text: '销售员业绩'
          },
          xAxis: {
            type: 'category',
            data: response.data[0],
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: response.data[1],
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        })
      })
    },
    getshowprofit(){
      showpartprofit().then(response => {
        let myEchartsBar = this.$echarts.init(document.getElementById("line1"))
        console.info(response.data)
        myEchartsBar.setOption({
          title: {
            text: '部件利润月份表'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: response.data[0]
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          },
          series: [
            {
              // name: 'Highest',
              type: 'line',
              data: response.data[1],
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              markLine: {
                data: [{ type: 'average', name: 'Avg' }]
              }
            },
          ]
        })
      })
    },
    getvehicleprofit(){
      showvehicleprofit().then(response => {
        let myEchartsBar = this.$echarts.init(document.getElementById("line2"))
        console.info(response.data)
        myEchartsBar.setOption({
          title: {
            text: '车辆利润月份表'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: response.data[0]
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          },
          series: [
            {
              // name: 'Highest',
              type: 'line',
              data: response.data[1],
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              markLine: {
                data: [{ type: 'average', name: 'Avg' }]
              }
            },
          ]
        })
      })
    },

  },
  mounted() {
    this.count()
    this.showPie1()
    this.showPie2()
    this.showPie3()
    this.showPie4()
    this.getsalepersonachivement();
    this.getshowprofit();
    this.getvehicleprofit();
    // this.showLine()
    // this.total()
  }
}
</script>

<style>
.el-row {
  padding: 5px;
}
</style>
